<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元器件采购</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style  >
        show{
            height: 200px ;
            width: 500px;
            background-color: #F4F4F4 ;
            margin-bottom: 88px;
            margin-top: 50px;
            margin-right: auto;
            margin-left: auto
        }
    </style>
</head>

<body style="align-content: center">
<div style="margin-top: 100px;margin-left: 10%">
    <h1>元器件采购</h1>
</div>
<div style="width: 600px;margin: auto;margin-top: 8%" >
    <form class="layui-form" action="">
        <!--二级联动下拉框-->
        <div class="layui-form-item">
            <label class="layui-form-label">产品推荐</label>
            <div class="layui-input-inline">
                <select name="quiz1" id="quiz1" lay-filter="yiji">
                    <option value="">请选择一级分类</option>
                    <option value="0">电容器</option>
                    <option value="1">电感器</option>
                    <option value="2">电连接器</option>
                    <option value="3">电阻器</option>
                    <option value="4">石英晶体器件</option>
                    <option value="5">继电器</option>
                    <option value="6">电板元件</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz2" id="quiz2" lay-filter="leibie">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label">选择型号</label>
            <div class="layui-input-block">
                <select name="interest" id="xinghao" lay-filter="xinghao">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label">用途</label>
            <div class="layui-input-block">
                <select name="interest">
                    <option value=""></option>
                    <option value="0">军用</option>
                    <option value="1">民用</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label">厂商</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">上海直大实业有限公司</option>
                    <option value="1">横店东磁</option>
                    <option value="2">深圳市汇莱威科技有限公司</option>
                </select>
            </div>
        </div>
    </form>

    <!--风险厂商提示弹出层-->
    <div id="showP" style="display: none">

        <div class="layui-row"  style="background-color: #F4F4F4;margin-top: 50px;margin-bottom: 50px;margin-left: 50px">
            <div class="layui-col-xs4">
                <img  src="../image/warning.jpeg" style="margin-left: 50px;margin-top: 16px; height: 80px;width: 80px; ">
                <div style="margin-bottom: 16px;margin-left: 54px;font-size: 16px;color: red">业务中断!</div>
            </div>
            <div class="layui-col-xs8">
                <div style="margin-top: 20px">
                    <span style="font-size: 20px ">该供应商产品存在风险,请选择其他其他供应商！</span>
                </div>

                <div style="padding-top: 25px;margin-left: 30px">
                    <div style="float: left">
                        <span style="margin-top: 10px;margin-left: 30px"> <a href="detailsPage.html">查看风险原因</a></span>
                    </div>
                    <div style="float: left">
                        <span style="margin-top: 5px;margin-left: 20px"> <a>继续选择供应商</a></span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!--产品推荐弹出层-->
<div id="showD" style="display: none">
    <div class="layui-row"  style="width:900px;height: 152px;margin: 0 auto;">
        <img src="../image/1.png" style="width:900px;height: 152px;">
    </div>
</div>



<script src="../css/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','layer','jquery'], function(){
        var form = layui.form
            ,layer = layui.layer
            , $ = layui.$
            ,layedit = layui.layedit;

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //弹出风险产品提示框
        form.on('select(aihao)', function(data){
            if (data.value==='1'){
                $("#showP").attr('style','display:inline');
            }else {
                $("#showP").attr('style','display:none');
            }
        });

        //二级联动（一级分类）
        form.on('select(yiji)', function(data){
            var html = '<option value="">请选择</option>';
            if (data.value==='2'){
                html += '<option value="0">无机/有机介质电连接器</option>' +
                    '<option value="1">低频连接器（1-49芯）</option>'+
                    '<option value="2">CAK-8型有可靠性指标的固体电解质电连接器</option>'+
                    '<option value="3">CAK35H型气密封非固体电解质电连接器</option>'+
                    '<option value="4">CAK45C型有可靠性的片容氏电连接器</option>';
            }else if (data.value){
                html += '<option value="0">HJHj-9999</option>' +
                    '<option value="1">GH/HJK电容</option>'+
                    '<option value="2">FHJ-789</option>'+
                    '<option value="3">分布式连接器</option>'+
                    '<option value="4">GHG-88-HKJK</option>';
            }else {
                $('#xinghao').html(html);
            }
            $('#quiz2').html(html);
            form.render("select");
        });
        //二级联动（具体型号）
        form.on('select(leibie)', function(data){
            var html = '<option value="">请选择</option>';
            if (data.value==='1'){
                html += '<option value="LM321LV">LM321LV</option>' +
                    '<option value="1">VCGF5A 450V4700UF</option>'+
                    '<option value="2">SCS-700-1</option>'+
                    '<option value="3">SCHB系列</option>'+
                    '<option value="4">VCGF5A 400V2200UF</option>';
            }else if (data.value){
                html += '<option value="0">FKJJ-788</option>' +
                    '<option value="1">VCGF5A 400</option>'+
                    '<option value="2">CACSA-370-AGV</option>'+
                    '<option value="3">HBACS系列</option>';
            }
            $('#xinghao').html(html);
            form.render("select");
        });
        //选择具体型号后弹出图片
        form.on('select(xinghao)', function(data){
            if (data.value==='LM321LV'){
                $("#showD").attr('style','display:inline');
            }else {
                $("#showD").attr('style','display:none');
            }
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>

</body>
</html>